<template>
  <modal :visible="visible" position="center">
    <view class="eb-member-modal">
      <image
        @click="onClose"
        src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/member_close.png"
        class="top-close"
        mode="widthFix"
      />
      <image
        class="model-icon"
        src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/member_icon.png"
        mode="widthFix"
      ></image>
      <view class="content">
        <view class="message"
          >查询到您授权的手机号尚未注册过会员，请重新授权手机号码进行绑定，或使用当前手机号码注册新会员，如需帮助，请联系客服。</view
        >
        <view class="btn-wrap">
          <button class="common-btn solid btn" @click.stop="onRegister">
            立即入会
          </button>
          <button
            class="common-btn btn"
            open-type="getPhoneNumber"
            @getphonenumber="onGetPhoneNumber($event, 'register')"
          >
            重新授权
          </button>
        </view>
      </view>
    </view>
  </modal>
</template>
  
  <script>
import modal from "../modal/modal.vue";
import mCheckbox from "../m-checkbox/m-checkbox.vue";
import { makeTheCallImg } from "./static.js";
import { navigateToMemberRule } from "./utils";
import tip from "@/utils/tip";
import api from "@/api/api";
import registerController from "./RegisterController";
import RegisterTracker from "./RegisterTracker";
import { CUSTOMER_INFO } from "@/utils/constant";
export default {
  name: "new-eb-member-modal",
  components: { modal, mCheckbox },
  props: {
    // 使用页面
    location: {
      type: String,
      default: "home",
    },
  },
  data() {
    return {
      visible: false,
      imgSrc: makeTheCallImg,
      useInfo: {
        mobile: "", //手机号
        isActive: "", //1 会员 0 新用户
      },
      phoneNumber: null,
    };
  },
  methods: {
    async getUseInfo() {
      let that = this;
      let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
      that.useInfo.mobile = customerInfo.mobile;
      let jwt = customerInfo.jwt;
      that.jwt = jwt;
      await that.getMemberDetail(jwt);
    },
    open(phoneNumber) {
      this.phoneNumber = phoneNumber;
      this.visible = true;
      RegisterTracker.joinVipResult({
        success: false,
        failReason:
          "查询到您授权的手机号尚未注册过会员，请重新授权手机号码进行绑定，或使用当前手机号码注册新会员，如需帮助，请联系客服。",
      });
      // this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '会员注册/绑定', 'popup_name': '注册失败弹窗'})
    },
    close() {
      this.visible = false;
    },
    onClose() {
      this.close();
      this.$emit("close");
    },
    onLinkClick() {
      navigateToMemberRule();
    },
    onTip(btnName) {
      RegisterTracker.authViprules({
        btnName: btnName,
        registerType: "NORMAL",
      });
      if (!this.ruleCheck) {
        tip.plainText("请确认您已阅读并同意会员规则");
        return false;
      }
      return true;
    },
    // 当前是老会员点击注册 授权的手机号与当前手机号不一致 -
    async onGetPhoneNumber(e, type) {
      let that = this;
      try {
        await this.getUseInfo();
      } catch (error) {
        
      }
      const app = getApp();
      const res = await registerController.getPhoneNumberData(e, {
        location: this.location,
      });
      this.close();
      // 验证手机
      if (res.success) {
        const { phoneNumber } = res.data;
        const phoneNumberReg = /^1\d{10}$/;
        if (!phoneNumberReg.test(phoneNumber)) {
          uni.hideLoading();
          this.$emit("confirm", { messageModalCode: "OVERSEAS_MEMBER" });
          return;
        }
        //当前是老会员点击注册 授权的手机号与当前手机号不一致
        if (
          res.data.phoneNumber != this.useInfo.mobile &&
          this.useInfo.isActive == 1
        ) {
          this.visible = true;
          uni.hideLoading();
          return;
        } else if (this.useInfo.isActive == 0) {
          // 新用户
          uni.hideLoading();
          // 跳转注册页
          uni.navigateTo({
            url: `/pages/customer/exclusiveRegister?phoneNumber=${phoneNumber}&isDialog=0&userState=${type}&isActive=0`,
          });
        } else if (this.useInfo.isActive == 1) {
          //  老会员点击注册
          uni.hideLoading();
          // 跳转注册页
          uni.navigateTo({
            url: `/pages/customer/exclusiveRegister?phoneNumber=${phoneNumber}&isDialog=1&userState=${type}&isActive=1`,
          });
        }
      } else {
        uni.hideLoading();
      }
    },
    // 即可入会-跳转注册页
    async onRegister() {
      this.close();
      uni.navigateTo({
        url: `/pages/customer/exclusiveRegister?phoneNumber=${this.phoneNumber}`,
      });

      // if (this.onTip("立即注册")) {
      //   const res = await registerController.register();
      //   if (res.registerSuccess) {
      //     const userCheckResult = await registerController.repeatUserCheck();
      //     // 这里强制变更模板(接口只能查出绑定成功, 期望是入会成功)
      //     if (userCheckResult.messageModalCode === "SUCCESS_BIND") {
      //       userCheckResult.messageModalCode = "SUCCESS_JOIN";
      //     }
      //     Object.assign(res, userCheckResult);
      //     getApp().commonssPopupTrack(
      //       "PopupExposure",
      //       {},
      //       "NORMAL",
      //       "SUCCESS_JOIN"
      //     );
      //     this.close();
      //     this.$emit("recheckUser", res);
      //   }
      //   if (res.joinMemberSuccess) {
      //     this.$emit("registerSuccess", res);
      //   }
      // }
    },
    /**
     * 判断是否是会员
     *
     * @param jwt
     * @return {Promise<void>}
     */
    getMemberDetail: async function (jwt) {
      let that = this;
      const memberDetailsResult = await api.getMemberDetails({
        header: {
          jwt: jwt,
        },
      });
      if (memberDetailsResult.code == 1000) {
        let memberDetails = memberDetailsResult.data;
        if (memberDetails.isActive == "Active") {
          that.useInfo.isActive = 1;
          // 是会员 跳转注册页
          // uni.navigateTo({
          //   url: "/pages/customer/exclusiveRegister",
          // });
        } else {
          that.useInfo.isActive = 0;
        }
      }
    },
  },
};
</script>
  
  <style lang="scss" scoped>
@import "./common.scss";

.eb-member-modal {
  width: 654rpx;
  height: 652rpx;
  background: #fff;
  position: relative;

  .top-img {
    display: block;
    width: 100%;
  }
  .top-close {
    position: absolute;
    right: 24rpx;
    top: 24rpx;
    width: 64rpx;
    height: 64rpx;
  }
  .model-icon {
    width: 182rpx;
    height: 57rpx;
    padding-top: 128rpx;
    padding-left: 236.12rpx;
  }

  .content {
    padding-top: 20rpx;
    padding-bottom: 96rpx;
  }

  .message {
    font-size: 28rpx;
    line-height: 48rpx;
    padding: 0 64rpx;
    font-weight: 400;
    color: #757575;
    font-family: "NotoSansSC-Regular";
    text-align: center;
    margin-bottom: 80rpx;
  }

  .checkbox-item {
    display: flex;
    margin-top: 80rpx;
    padding: 0 72rpx;
    box-sizing: border-box;
    width: 100%;

    .checkbox-text {
      margin-left: 16rpx;
      flex: 1;
      font-size: 24rpx;
      line-height: 40rpx;
    }
  }

  .btn-wrap {
    margin-top: 32rpx;
    padding: 0 64rpx;
    display: flex;
    justify-content: space-between;
  }

  .close {
    position: absolute;
    margin: 0;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    padding: 24rpx;
    font-size: 28rpx;
    color: #fff;
    line-height: 1;
  }
}
.line {
  color: #757575;
  font-family: "FrankNew-Regular";
  width: 470rpx;
  font-size: 24rpx;
}
.font-black {
  color: #1a1a1a;
  font-family: "FrankNew-Regular", "NotoSansSC-Regular";
  // word-break: break-all;
}

// 宽屏间距调大
@media screen and (min-width: 390px) {
  .eb-member-modal {
    .line {
      // letter-spacing: 0.076rpx;
    }
    .message {
      letter-spacing: 0.076rpx;
    }
  }
}
</style>
    